import React from 'react';
import style from "./style.module.scss"
import MyTaskSelect from "../../assets/images/image/hdpi/my_task_select.png"
interface Step {
    title: number;
    completed: boolean;
    day: number
}

interface SignInStepperProps {
    steps: Step[];
    activeStep: number;
}

const SignInStepper: React.FC<SignInStepperProps> = ({ steps, activeStep }) => {


    return (
        <div className={style.signStepper}>
            {steps.map((step, index) => (
                <div key={index} className={style.signItem}>
                    <div className={style.accumulatePoints}>+{step.title}</div>
                    <div className={index === activeStep || step.completed ? style.activeStep : style.active}>
                        <div className={index === activeStep || step.completed ? style.isThread : style.thread}></div>
                        {
                            index===activeStep && <div className={style.demoIcon}>
                                <img src={MyTaskSelect} alt="" />
                            </div>
                        }
                    </div>
                    <div className={style.day}>{step.day}天</div>
                </div>
            ))}
        </div>
    );
};

export default SignInStepper;
